
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Awesome go-echarts</title>
    <script src="http://127.0.0.1:8083/assets/echarts.min.js"></script>
    <script src="http://127.0.0.1:8083/assets/maps/china.js"></script>
    <script src="http://127.0.0.1:8083/assets/maps/guangdong.js"></script>
    <script src="http://127.0.0.1:8083/assets/maps/guang3_dong1_shan4_tou2.js"></script>
    <link href="http://127.0.0.1:8083/assets/bulma.min.css" rel="stylesheet">
</head>

<body>
<div class="select" style="margin-right:10px; margin-top:10px; position:fixed; right:10px;">
    <select onchange="window.location.href=this.options[this.selectedIndex].value">
        <option value="http://127.0.0.1:8080/geo">Geo-地理坐标系</option>
        <option value="http://127.0.0.1:8080/bar3D">Bar3D-(3D 柱状图)</option>
        <option value="http://127.0.0.1:8080/boxPlot">BoxPlot-(箱线图)</option>
        <option value="http://127.0.0.1:8080/effectScatter">EffectScatter-(动态散点图)</option>
        <option value="http://127.0.0.1:8080/funnel">Funnel-(漏斗图)</option>
        <option value="http://127.0.0.1:8080/gauge">Gauge-仪表盘</option>
        <option value="http://127.0.0.1:8080/bar">Bar-(柱状图)</option>
        <option value="http://127.0.0.1:8080/graph">Graph-关系图</option>
        <option value="http://127.0.0.1:8080/heatMap">HeatMap-热力图</option>
        <option value="http://127.0.0.1:8080/kline">Kline-K 线图</option>
        <option value="http://127.0.0.1:8080/line">Line-(折线图)</option>
        <option value="http://127.0.0.1:8080/line3D">Line3D-(3D 折线图)</option>
        <option value="http://127.0.0.1:8080/liquid">Liquid-(水球图)</option>
        <option value="http://127.0.0.1:8080/map">Map-(地图)</option>
        <option value="http://127.0.0.1:8080/overlap">Overlap-(重叠图)</option>
        <option value="http://127.0.0.1:8080/parallel">Parallel-(平行坐标系)</option>
        <option value="http://127.0.0.1:8080/pie">Pie-(饼图)</option>
        <option value="http://127.0.0.1:8080/radar">Radar-(雷达图)</option>
        <option value="http://127.0.0.1:8080/sankey">Sankey-(桑基图)</option>
        <option value="http://127.0.0.1:8080/scatter">Scatter-(散点图)</option>
        <option value="http://127.0.0.1:8080/scatter3D">Scatter-(3D 散点图)</option>
        <option value="http://127.0.0.1:8080/surface3D">Surface3D-(3D 曲面图)</option>
        <option value="http://127.0.0.1:8080/themeRiver">ThemeRiver-(主题河流图)</option>
        <option value="http://127.0.0.1:8080/wordCloud">WordCloud-(词云图)</option>
        <option value="http://127.0.0.1:8080/page">Page-(顺序多图)</option>
    </select></div>

    
<div class="container">
    <div class="item" id="TmKENbvNePPO"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_TmKENbvNePPO = echarts.init(document.getElementById('TmKENbvNePPO'), "white");
    let option_TmKENbvNePPO = {
        title: {"text":"Geo-示例图(effectScatter)",},
        tooltip: {"formatter":function (params) {return params.name + ' : ' + params.value[2];}},
        legend: {},
        geo: {"map":"china"},
        series: [
        {"name":"geo","type":"effectScatter","coordinateSystem":"geo","data":[{"name":"上海","value":[121.4737,31.230415,87]},{"name":"深圳","value":[114.07,22.62,47]},{"name":"辽宁","value":[123.42944,41.83544,59]},{"name":"山西","value":[112.5624,37.87353,18]},{"name":"齐齐哈尔","value":[123.97,47.33,106]},{"name":"北京","value":[116.407524,39.90403,131]},{"name":"青岛","value":[120.33,36.07,31]},{"name":"陕西","value":[108.95424,34.265472,25]},{"name":"乌鲁木齐","value":[87.68,43.77,140]}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},"rippleEffect":{"period":4,"scale":6,"brushType":"stroke"},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_TmKENbvNePPO.setOption(option_TmKENbvNePPO);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="xtAlieChTjQN"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_xtAlieChTjQN = echarts.init(document.getElementById('xtAlieChTjQN'), "white");
    let option_xtAlieChTjQN = {
        title: {"text":"Geo-显示 Label",},
        tooltip: {"formatter":function (params) {return params.name + ' : ' + params.value[2];}},
        legend: {},
        geo: {"map":"china"},
        series: [
        {"name":"geo","type":"effectScatter","coordinateSystem":"geo","data":[{"name":"北京","value":[116.407524,39.90403,131]},{"name":"青岛","value":[120.33,36.07,31]},{"name":"陕西","value":[108.95424,34.265472,25]},{"name":"乌鲁木齐","value":[87.68,43.77,140]},{"name":"上海","value":[121.4737,31.230415,87]},{"name":"深圳","value":[114.07,22.62,47]},{"name":"辽宁","value":[123.42944,41.83544,59]},{"name":"山西","value":[112.5624,37.87353,18]},{"name":"齐齐哈尔","value":[123.97,47.33,106]}],"label":{"show":true,"color":"black","position":"right","formatter":function (params) {return params.name + ' : ' + params.value[2];}},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},"rippleEffect":{"period":4,"scale":6,"brushType":"stroke"},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_xtAlieChTjQN.setOption(option_xtAlieChTjQN);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="RlSMYKfCZTDr"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_RlSMYKfCZTDr = echarts.init(document.getElementById('RlSMYKfCZTDr'), "white");
    let option_RlSMYKfCZTDr = {
        title: {"text":"Geo-Scatter",},
        tooltip: {"formatter":function (params) {return params.name + ' : ' + params.value[2];}},
        legend: {},
        geo: {"map":"china"},
        series: [
        {"name":"geo","type":"scatter","coordinateSystem":"geo","data":[{"name":"上海","value":[121.4737,31.230415,87]},{"name":"深圳","value":[114.07,22.62,47]},{"name":"辽宁","value":[123.42944,41.83544,59]},{"name":"山西","value":[112.5624,37.87353,18]},{"name":"齐齐哈尔","value":[123.97,47.33,106]},{"name":"北京","value":[116.407524,39.90403,131]},{"name":"青岛","value":[120.33,36.07,31]},{"name":"陕西","value":[108.95424,34.265472,25]},{"name":"乌鲁木齐","value":[87.68,43.77,140]}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_RlSMYKfCZTDr.setOption(option_RlSMYKfCZTDr);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="WKPDffDmFNrE"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_WKPDffDmFNrE = echarts.init(document.getElementById('WKPDffDmFNrE'), "white");
    let option_WKPDffDmFNrE = {
        title: {"text":"Geo-设置 VisualMap",},
        tooltip: {"formatter":function (params) {return params.name + ' : ' + params.value[2];}},
        legend: {},
        geo: {"map":"china"},
        visualMap:[{"calculable":true,"max":60,}],
        series: [
        {"name":"geo","type":"scatter","coordinateSystem":"geo","data":[{"name":"上海","value":[121.4737,31.230415,87]},{"name":"深圳","value":[114.07,22.62,47]},{"name":"辽宁","value":[123.42944,41.83544,59]},{"name":"山西","value":[112.5624,37.87353,18]},{"name":"齐齐哈尔","value":[123.97,47.33,106]},{"name":"北京","value":[116.407524,39.90403,131]},{"name":"青岛","value":[120.33,36.07,31]},{"name":"陕西","value":[108.95424,34.265472,25]},{"name":"乌鲁木齐","value":[87.68,43.77,140]}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_WKPDffDmFNrE.setOption(option_WKPDffDmFNrE);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="vqxSXZPAgeXq"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_vqxSXZPAgeXq = echarts.init(document.getElementById('vqxSXZPAgeXq'), "white");
    let option_vqxSXZPAgeXq = {
        title: {"text":"Geo-HeatMap",},
        tooltip: {"formatter":function (params) {return params.name + ' : ' + params.value[2];}},
        legend: {},
        geo: {"map":"china"},
        visualMap:[{"calculable":true,"max":60,}],
        series: [
        {"name":"geo","type":"heatmap","coordinateSystem":"geo","data":[{"name":"北京","value":[116.407524,39.90403,131]},{"name":"青岛","value":[120.33,36.07,31]},{"name":"陕西","value":[108.95424,34.265472,25]},{"name":"乌鲁木齐","value":[87.68,43.77,140]},{"name":"上海","value":[121.4737,31.230415,87]},{"name":"深圳","value":[114.07,22.62,47]},{"name":"辽宁","value":[123.42944,41.83544,59]},{"name":"山西","value":[112.5624,37.87353,18]},{"name":"齐齐哈尔","value":[123.97,47.33,106]}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_vqxSXZPAgeXq.setOption(option_vqxSXZPAgeXq);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="SfmMUtjDOvxu"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_SfmMUtjDOvxu = echarts.init(document.getElementById('SfmMUtjDOvxu'), "white");
    let option_SfmMUtjDOvxu = {
        title: {"text":"Geo-示例图(effectScatter+heatMap)",},
        tooltip: {"formatter":function (params) {return params.name + ' : ' + params.value[2];}},
        legend: {},
        geo: {"map":"china"},
        visualMap:[{"calculable":true,"max":60,}],
        series: [
        {"name":"es","type":"effectScatter","coordinateSystem":"geo","data":[{"name":"深圳","value":[114.07,22.62,47]},{"name":"辽宁","value":[123.42944,41.83544,59]},{"name":"山西","value":[112.5624,37.87353,18]},{"name":"齐齐哈尔","value":[123.97,47.33,106]},{"name":"上海","value":[121.4737,31.230415,87]},{"name":"青岛","value":[120.33,36.07,31]},{"name":"陕西","value":[108.95424,34.265472,25]},{"name":"乌鲁木齐","value":[87.68,43.77,140]},{"name":"北京","value":[116.407524,39.90403,131]}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},"rippleEffect":{"period":4,"scale":10,"brushType":"stroke"},},
        {"name":"heatmap","type":"heatmap","coordinateSystem":"geo","data":[{"name":"上海","value":[121.4737,31.230415,87]},{"name":"深圳","value":[114.07,22.62,47]},{"name":"辽宁","value":[123.42944,41.83544,59]},{"name":"山西","value":[112.5624,37.87353,18]},{"name":"齐齐哈尔","value":[123.97,47.33,106]},{"name":"北京","value":[116.407524,39.90403,131]},{"name":"青岛","value":[120.33,36.07,31]},{"name":"陕西","value":[108.95424,34.265472,25]},{"name":"乌鲁木齐","value":[87.68,43.77,140]}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_SfmMUtjDOvxu.setOption(option_SfmMUtjDOvxu);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="zXYKkmxUkZtV"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_zXYKkmxUkZtV = echarts.init(document.getElementById('zXYKkmxUkZtV'), "white");
    let option_zXYKkmxUkZtV = {
        title: {"text":"Geo-广东地图",},
        tooltip: {"formatter":function (params) {return params.name + ' : ' + params.value[2];}},
        legend: {},
        geo: {"map":"广东"},
        visualMap:[{"calculable":true,"inRange":{"color":["#50a3ba","#eac736","#d94e5d"]}}],
        series: [
        {"name":"geo","type":"scatter","coordinateSystem":"geo","data":[{"name":"汕头市","value":[116.68,23.35,12]},{"name":"佛山市","value":[113.12,23.02,28]},{"name":"梅州市","value":[116.12,24.28,95]},{"name":"深圳市","value":[114.05,22.55,0]},{"name":"广州市","value":[113.27,23.13,44]},{"name":"湛江市","value":[110.35,21.27,61]},{"name":"东莞市","value":[113.75,23.05,89]},{"name":"云浮市","value":[112.03,22.92,74]},{"name":"肇庆市","value":[112.47,23.05,111]}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_zXYKkmxUkZtV.setOption(option_zXYKkmxUkZtV);
</script>

    <br/>
    
<div class="container">
    <div class="item" id="hETyCiFRrkjt"
         style="width:900px;height:500px;"></div>
</div>
<script type="text/javascript">
    "use strict";
    let myChart_hETyCiFRrkjt = echarts.init(document.getElementById('hETyCiFRrkjt'), "white");
    let option_hETyCiFRrkjt = {
        title: {"text":"Geo-汕头地图",},
        tooltip: {"formatter":function (params) {return params.name + ' : ' + params.value[2];}},
        legend: {},
        geo: {"map":"汕头"},
        visualMap:[{"calculable":true,"inRange":{"color":["#50a3ba","#eac736","#d94e5d"]}}],
        series: [
        {"name":"geo","type":"heatmap","coordinateSystem":"geo","data":[{"name":"澄海区","value":[116.77,23.48,137]},{"name":"潮阳区","value":[116.6,23.27,56]},{"name":"潮南区","value":[116.43,23.25,95]},{"name":"南澳县","value":[117.02,23.42,66]}],"label":{"show":false},"emphasis":{"label":{"show":false},},"markLine":{"label":{"show":false}},"markPoint":{"label":{"show":false}},},
        ],
        color: ["#c23531","#2f4554","#61a0a8","#d48265","#91c7ae","#749f83","#ca8622","#bda29a","#6e7074","#546570","#c4ccd3"],
    };
    myChart_hETyCiFRrkjt.setOption(option_hETyCiFRrkjt);
</script>

    <br/>
<style>
    .container {display: flex;justify-content: center;align-items: center;}
    .item {margin: auto;}
</style>
</body>
</html>
